{% extends 'easydisAPSBundle::base_template.html.twig' %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/easydisAPS/css/style_table_gris.css') }}" type="text/css" media="all" />
    <link rel="stylesheet" href="{{ asset('bundles/easydisAPS/smoothness/jquery-ui-1.10.3.custom.css') }}" />
{% endblock %}

{% block style %}
    #tab_recap {
        border: 1px solid #000;
        border-collapse: collapse;
        width: 100%;
        height: 100%;
        text-align: center;
        margin-top: 6px;
        color: #000;
    }
    
    #tab_recap td {
        border: 1px solid #000;
    }
    
    #tab_recap th {
        background-color:silver;
    }
    
    .bleu {
        background-color: #69b3d1;
        color: #000;
    }
    
    .marron {
        background-color: #BBAE98;
    }
    
    .rouge {
        background-color: #ff8080;
    }
    
{% endblock %}
    
{% block scripts %}
    <!--Load the AJAX API-->
    <script type="text/javascript" src="{{ asset('bundles/easydisAPS/js/jquery-1.10.2.min.js') }}"></script>
    <script src="{{ asset('bundles/easydisAPS/smoothness/jquery-ui-1.10.3.custom.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/easydisAPS/js/datepickerFR.js') }}"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
      
        var data = google.visualization.arrayToDataTable([
            
            {% set debut = 0 %}
            {% for tab in tabResult %}
            {% set i = 0 %}
            {% if 0 < debut %},{% endif %}[
            {%for ligne in tab %}
                {% if 0 < i %}
                    {% if debut == 1 %}
                        ,{{ ligne }}
                    {% else %}
                        ,'{{ ligne }}'
                    {% endif %}
                {% else %}
                '{{ ligne }}'
                {% endif %}
                {% set i = i + 1 %}
            {% endfor %}
            ]
            {% set debut = 1 %}
          {% endfor %}
        ]);

        var options = {'title':'Visualisation : {{ radio }}',
                     height: 400,
                     chartArea: { left: 50, top: 25 },
                     vAxis: { maxValue: 10 },
                     backgroundColor: '#f9f9f9'};

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      };
      
      $(function(){
        $('#date_debut').datepicker();
        $('#date_fin').datepicker();
      });
   </script>
{% endblock %}

{% block position %}
    <a href="{{ path('easydisAPSBundle_routing_choose_gs', {'date':"now"|date("d/m/Y"),'exploit':app.user.exploit.id, 'choix':'dashboard', 'type':1}) }}" title="Retour Liste des groupes de services" class="tip-bottom"><i class="icon-th-list"></i> Liste des Groupes de Services</a>
    <a href="#" title="Vous êtes ici" class="tip-bottom"><i class="icon-th-list"></i> Tableau prévisionnel </a>
{% endblock %}
{% block contenu %}
    <div class="row-fluid">
    <div class="span6">
            <div class="widget-box">
                    <div class="widget-title">
                            <span class="icon">
                                    <i class="icon-th-list"></i>
                            </span>
                            <h5>Options du graphique</h5>
                    </div>
                    <div class="widget-content">
                        <form class="form-horizontal" method="POST" action="{{ path('easydisAPSBundle_dashboard_gs', {'date':dateC, 'gs':gs.id}) }}">
                             <div class="control-group">
                                    <label class="control-label">Données : </label>
                                    <div class="controls">
                                            <label><input type="radio" name="type" value="UO" {% if radio == "UO"  %} checked {% endif %}/> UO</label>
                                            <label><input type="radio" name="type" value="Heures" {% if radio == "Heures"  %} checked {% endif %} /> Heures</label>
                                            <label><input type="radio" name="type" value="Prod" {% if radio == "Prod"  %} checked {% endif %} /> Productivité</label>
                                    </div>
                            </div>
                            <div class="control-group">
                                    <label class="control-label">Séries :</label>
                                    <div class="controls">
                                            <label><input type="checkbox" name="Prev" value="1" {% if prev == 1  %} checked {% endif %} /> Prévision</label>
                                            <label><input type="checkbox" name="Obj" value="1" {% if obj == 1  %} checked {% endif %} /> Objectif</label>
                                            <label><input type="checkbox" name="Reel" value="1" {% if reel == 1  %} checked {% endif %} /> Réel</label>
                                    </div>
                            </div>
                            <div class="control-group">
                                        <label class="control-label">Date début</label>
                                        <div class="controls">
                                            <input type="input" name="date_debut" id="date_debut" size="10" readonly="readonly" value="{{ dateD }}" style="width: 100px;"/>
                                        </div>
                            </div>
                            <div class="control-group">
                                    <label class="control-label">Date fin</label>
                                    <div class="controls">
                                        <input type="input" name="date_fin" id="date_fin" size="10" readonly="readonly" value="{{ dateF }}" style="width: 100px;"/>
                                    </div>
                            </div>
                            <input type="submit" value="Valider" class="btn-info">
                        </form>
                    </div>
            </div>
    </div>
    <div class="span6">
        <div class="widget-box">
                <div class="widget-title">
                        <span class="icon">
                                <i class="icon-signal"></i>
                        </span>
                        <h5>Taux de service</h5>
                </div>
                <div class="widget-content">
                        {% if tabH[0][1] == 0 %} {% set prodprev = 0 %} {% set prodprev = 0 %}{% else %} {% set prodprev = tabUO[0][1]/tabH[0][1] %} {% endif %}
                        {% if tabH[0][3] == 0 %} {% set prodrea = 0 %} {% set prodrea = 0 %}{% else %} {% set prodrea = tabUO[0][3]/tabH[0][3] %} {% endif %}
                        {% if tabH[0][2] == 0 %} {% set prodobj = 0 %} {% set prodobj = 0 %}{% else %} {% set prodobj = tabUO[0][2]/tabH[0][2] %} {% endif %}
                        <table id="tab_recap" align="center">
                            <tr>
                                <th>Total Période</th>
                                <th>Heures</th>
                                <th>UO</th>
                                <th>Prod</th>
                            </tr>
                            <tr>
                                <td><b><span style="color: #BBAE98;">Objectif</span> - <span style="color: #69b3d1;">Prévision</span></b></td>
                                <td>{{ (tabH[0][2]-tabH[0][1])|number_format(1) }}</td>        
                                <td>{{ (tabUO[0][2]-tabUO[0][1])|number_format(0, ',', ' ') }}</td> 
                                <td>{{ (prodprev-prodobj)|number_format(1) }}</td>
                            </tr>
                            <tr>
                                <td class="bleu">Prévision</td>
                                <td>{{ tabH[0][1]|number_format(1) }}</td>        
                                <td>{{ tabUO[0][1]|number_format(0, ',', ' ') }}</td> 
                                <td>{{ prodprev|number_format(1) }}</td>
                            </tr>
                            <tr>
                                <td class="marron">Objectif</td>
                                <td class="marron">{{ tabH[0][2]|number_format(1) }}</td>        
                                <td class="marron">{{ tabUO[0][2]|number_format(0, ',', ' ') }}</td> 
                                <td class="marron"> {{ prodobj|number_format(1) }}</td>
                            </tr>
                            <tr>
                                <td class="rouge">Réalisé</td>
                                <td>{{ tabH[0][3]|number_format(1) }}</td>        
                                <td>{{ tabUO[0][3]|number_format(0, ',', ' ') }}</td> 
                                <td>{{ prodrea|number_format(1) }}</td>
                            </tr>
                            <tr>
                                <td><b><span style="color: #BBAE98;">Objectif</span> - <span style="color: #ff8080;">Réalisé</span></b></td>
                                <td>{{ (tabH[0][2]-tabH[0][3])|number_format(1) }}</td>        
                                <td>{{ (tabUO[0][2]-tabUO[0][3])|number_format(0, ',', ' ') }}</td> 
                                <td>{{ (prodrea-prodobj)|number_format(1) }}</td>
                            </tr>
                        </table>
                </div>
        </div>
    </div>
    
    <div class="widget-box">
        <div class="widget-title"><span class="icon"><i class="icon-signal"></i></span>
          <h5>Graphique</h5>
        </div>
        <div class="widget-content">
          <div class="row-fluid">
            <div class="span12">
              <div id="chart_div" style="width:99%;"></div>
            </div>
    </div></div></div>
</div>
{% endblock %}

